<template>
    <div>
        <iframe 
            class="vue-iframe"
            :src="opensrc"
            sandbox="allow-scripts allow-popups allow-forms allow-modals"
        ></iframe>
        <float-button>
            <span class="iconfont">&#xe60b;</span>
        </float-button>
    </div>
</template>

<script>
import FloatButton from './components/FloatButton'

export default {
    name: 'VueFrame',
    props: ['opensrc'],
    components: { FloatButton },
    data() {
        return {
        }
    },
    beforeRouteEnter (to, from, next) {
        const answer = confirm('进入游戏？')
        if (answer) {
            next()
        } else {
            next(false)
        }
    },
    beforeRouteLeave (to, from , next) {
        const answer = confirm('退出游戏？')
        if (answer) {
            next()
        } else {
            next(false)
        }
    }
}
</script>

<style scoped>

    .vue-iframe {
        position: fixed;
        background: #000;
        border: none;
        top: 0; right: 0;
        bottom: 0; left: 0;
        width: 100%;
        height: 100%;
    }

</style>
